import React from 'react'
import {Card, Col, Row, Menu, Icon, Table} from 'antd'
import CustomBreadcrumb from "../../components/CustomBreadcrumb/index";
import TypingCard from '../../components/TypingCard'
import {inject, observer} from "mobx-react";

@inject('appStore') @observer
class Category extends React.Component {
  state = {
    openKey: '',
    theme: 'light',
    mode: 'horizontal',
      currentKey:''
  }

  componentDidMount () {
    this.props.appStore.getCategoryTree()
  }

  changeTheme = (checked) => {
    this.setState({
      theme: checked ? 'dark' : 'light'
    })
  }
  changeMode = (checked) => {
    this.setState({
      mode: checked ? 'inline' : 'horizontal'
    })
  }

    handleClick = (e) => {
        console.log('click ', e);
        this.setState({
            currentKey: e.key,
        });
        const cat_id = parseInt(e.key);
        this.props.appStore.getStockByCatId(cat_id);
    }

  render() {
    const cardContent = '行业分类获取同花顺定义的三级行业分类，按树状图展示';
      const columns = [{
          title: '股票代码',
          dataIndex: 'stock_code',
          key: 'stock_code',
      }, {
          title: '股票名称',
          dataIndex: 'stock_name',
          key: 'stock_name',
      }];
    return (
      <div>
        <CustomBreadcrumb arr={['行业分类']}/>
        <TypingCard source={cardContent} height={164} title='主要功能'/>
        <Row gutter={16}>
          <Col span={23}>
            <Card bordered={false} className='card-item'>
              <Row type='flex' align='left' justify="space-between">
                <Col>
                    <Menu mode="inline" style={{width: 200}} onClick={this.handleClick}>
                    {this.props.appStore.categoryTree.map(function (category1) {
                        return(
                            <Menu.SubMenu key={category1.id} title={<span><Icon type="caret-right" /><span>{category1.cate_name}</span></span>}>
                                {category1.children.map(function (category2) {
                                  return(
                                      <Menu.SubMenu key={category2.id} title={<span><Icon type="right" /><span>{category2.cate_name}</span></span>}>
                                          {category2.children.map(function (category3) {
                                            return(<Menu.Item key={category3.id}>{category3.cate_name}</Menu.Item>);
                                          })}
                                      </Menu.SubMenu>
                                  );
                                })}
                            </Menu.SubMenu>
                        );
                    })}
                  </Menu>
                </Col>
                <Col span={18}>
                    <Table dataSource={this.props.appStore.stockList} columns={columns} rowKey={record=>record.id}/>
                </Col>
              </Row>
            </Card>
          </Col>
        </Row>
      </div>
    )
  }
}

const styles = {
  Item:{
    height:190,
    marginBottom:10,
    borderRadius: 3,
  }
}

export default Category